<template>
    <scroll-view @refresherrefresh="refresherpulling" :refresher-triggered="enabled" refresher-enabled class="scroll-view" scroll-y="true" @scrolltolower="scrolltolower">
        <view class="content">
            <!-- 渐变色 -->
            <view class="positioning"></view>
            <!-- 搜索框 -->
            <view class="top">
                <view class="left">
                    <image class="position" src="@/static/area.png" mode=""></image>
                    <view class="address">{{ district }}</view>
                </view>
                <view class="right">
                    <input @blur="blur" v-model="keywords" placeholder-class="placeholder-text" type="text" placeholder="搜索商品、类目" />
                </view>
            </view>
            <!-- 店铺 -->
            <!-- 渐变色会把盒子盖住设置flex布局 -->
            <view class="Merchant">
                <!-- 在这个里面放每个商铺flex不会影响到 -->
                <view class="shop">
                    <!-- 列表 -->
                    <view class="shop-one" v-for="(item, index) in shopList" :key="index">
                        <!-- 昵称头像 -->
                        <view class="shop-top">
                            <view class="left" @click="shopDetas1(item)">
                                <image class="img" :src="item.logo" mode=""></image>
                                <view>
                                    <view class="shop-name">{{ item.name }}</view>
                                    <view class="distance">距离{{ item.distance_text }}</view>
                                </view>
                            </view>
                            <image @click="ngn(item)" class="positioning1" src="@/static/positioning.png" mode=""></image>
                        </view>
                        <!-- 商品信息 -->
                        <view class="wai-flex">
                            <view @click="shopDetas2(it)" class="flex" v-for="it in item.goodsList" :key="it.id">
                                <view class="flex-list">
                                    <view class="box1">
                                        <image class="box1-imng" :src="it.image" mode="aspectFit"></image>
                                    </view>
                                    <view class="price1">￥{{ it.price }}</view>
                                    <view class="sp-text">{{ it.title }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </scroll-view>
</template>
<script setup>
import { shops } from '@/api/index.js';
import { utils } from '@/utils/utils.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref, onMounted } from 'vue';
const shopList = ref([]); //商铺列表
const allTotal = ref(''); //商铺列表总页数
const page = ref(1); //商铺列表页数
const lng = ref(); //经度
const lat = ref(); //纬度
const enabled = ref(false); //控制下拉刷新
const keywords = ref(''); //搜索框的值
const district = ref(''); //当前地区
onMounted(async () => {
    page.value = 1; //当前页变成1
    shopList.value = []; //清空店铺列表
    await latAndlog(); //获取经纬度
    getShopList();
    convert(); //转换地址
});
onShow(() => {
    keywords.value = '';
});

const ngn = (item) => {
    console.log(item);
    // uni.getLocation({
    //     type: 'gcj02',
    //     success: function (res) {
    //         const latitude = res.latitude;
    //         const longitude = res.longitude;
    //         uni.openLocation({
    //             latitude: latitude,
    //             longitude: longitude,
    //             success: function () {
    //                 console.log('success');
    //             }
    //         });
    //     }
    // });
};
// 搜索框
const blur = () => {
    if (keywords.value != '') {
        uni.navigateTo({
            url: `/pages/sub/search?keywords=${keywords.value}`
        });
    }
};

// 下拉刷新
const refresherpulling = async () => {
    page.value = 1; //当前页变成1
    shopList.value = []; //清空店铺列表
    enabled.value = true;
    await getShopList();
    enabled.value = false;
};
// 获取当前经纬度
const latAndlog = () => {
    return new Promise((resolve, reject) => {
        uni.getLocation({
            type: 'wgs84',
            success: function (res) {
                lng.value = res.longitude;
                lat.value = res.latitude;
                console.log('当前位置的经度：' + res.longitude);
                console.log('当前位置的纬度：' + res.latitude);
                resolve({ longitude: res.longitude, latitude: res.latitude });
            },
            fail: function (err) {
                reject(err);
            }
        });
    });
};
// 获取商铺列表
const getShopList = async () => {
    const parameter = {
        page: page.value,
        lat: lat.value,
        lng: lng.value
    };
    const ret = await shops(parameter);
    console.log(ret.data);
    if (ret.code == 1) {
        // 将服务器返回的数据，追加至 shopList
        shopList.value = [...shopList.value, ...ret.data.data];
        allTotal.value = ret.data.total;
    } else {
        utils();
    }
};
const scrolltolower = () => {
    console.log('滚动到底部加载下一页');
    // 当前列表的长度如果小于或等于总页数
    if (shopList.value.length == allTotal.value) {
        return utils('没有更多数据了...');
    }
    page.value++;
    getShopList();
    console.log(22, page.value);
};
//点击店铺跳转店铺详情
const shopDetas1 = (item) => {
    console.log(777, item);
    uni.navigateTo({
        url: `/pages/sub/details?ids=${item.id}`
    });
};
//点击商品跳转商品详情
const shopDetas2 = (it) => {
    console.log(it);
    uni.navigateTo({
        url: `/pages/sub/shopDetails?ids=${it.id}`
    });
};
// 获取地区位置
const convert = async () => {
    uni.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
        method: 'POST',
        data: {
            location: `${lat.value},${lng.value}`,
            key: 'KSSBZ-4CDLI-PC4GD-UWNJH-2WLP7-7LF4Z'
        },
        header: { 'content-type': 'application/json' },
        success: async (res) => {
            district.value = res.data.result.address_component.district;
            console.log(11111, res);
        },
        // 这里的接口请求，如果出现问题就输出接口请求失败
        fail: (err) => {
            utils(err);
        }
    });
};
</script>

<style lang="scss" scoped>
.scroll-view {
    height: 100vh;
}
.content {
    position: relative;
    padding: 0 30rpx;
    background-color: #f7f7f7;
    min-height: 100vh;
    padding-bottom: 100rpx;
    // 商户
    .Merchant {
        .shop {
            // 每一个店铺
            .shop-one {
                .wai-flex {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 36rpx;
                }
                .flex {
                    .flex-list {
                        .sp-text {
                            width: 187rpx;
                            font-size: 26.02rpx;
                            white-space: nowrap; /* 禁止换行 */
                            overflow: hidden; /* 隐藏超出部分 */
                            text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
                        }
                        .price1 {
                            color: #f84834;
                            margin-top: 34rpx;
                        }
                        .box1 {
                            .box1-imng {
                                width: 150rpx;
                                height: 116rpx;
                            }
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 194rpx;
                            height: 205rpx;
                            border: 2rpx solid #f1f1f1;
                        }
                    }
                }
                .shop-top {
                    .positioning1 {
                        width: 56rpx;
                        height: 56rpx;
                    }
                    .left {
                        display: flex;
                        align-items: center;
                        .distance {
                            font-size: 27rpx;
                            color: #999999;
                            margin-top: 12rpx;
                        }
                        .shop-name {
                            font-size: 30rpx;
                        }
                        .img {
                            width: 66px;
                            height: 50px;
                            margin-right: 26rpx;
                            border-radius: 30rpx;
                        }
                    }
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                z-index: 2;
                background-color: #fff;
                margin-bottom: 24rpx;
                border-radius: 12rpx;
                padding: 24rpx 30rpx 46rpx 30rpx;
            }
            z-index: 2;
            width: 100%;
        }
        display: flex;
        // padding: 15rpx 15rpx 23rpx 15rpx;
        border-radius: 15rpx;
        width: 100%;
        margin-top: 50rpx;
    }
    // 顶部样式
    .top {
        .left {
            z-index: 9;
            display: flex;
            align-items: center;
            .position {
                width: 24rpx;
                height: 29rpx;
            }
            .address {
                margin-left: 18rpx;
                font-size: 26.25rpx;
            }
        }
        .right {
            ::v-deep .placeholder-text {
                font-size: 26.25rpx;
                color: #cccccc;
            }
            width: 534rpx;
            height: 72rpx;
            background: #ffffff;
            border-radius: 50rpx;
            padding-left: 76rpx;
            align-items: center;
            display: flex;
            z-index: 9;
        }
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 72rpx;
        padding-top: 40rpx;
    }
    .positioning {
        height: 282rpx;
        background: linear-gradient(to bottom, #ffe8be, #f7f7f7);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}
</style>
